import { AbstractAccordion, Layout, UserSubPageBase } from "@/components";
import { useState } from "react";
import { useDidShow } from "@tarojs/taro";
import { useAuth } from "@/store/authContext";
import { getInvoiceHistory } from "@/store/userDataContext";
import { View } from "@tarojs/components";
import { colors } from "@/data/shared/colors";
import { navigateTo } from "@/utils/navigation";
import {
  ApiInvoiceStatus,
  generateInvoiceStatusText,
  InvoiceHistoryShape,
} from "@/data/invoice/invoiceTypes";
import style from "./index.module.scss";

const InvoiceHistoryCard = ({
  invoiceTime,
  status,
  invoiceId,
  title,
  price,
}: {
  invoiceTime: string;
  status: ApiInvoiceStatus;
  invoiceId: number;
  title: string;
  price: string;
}) => {
  const styledAsLink = status === ApiInvoiceStatus.Invoiced;

  const statusText = generateInvoiceStatusText(status);

  return (
    <View className={style["invoice-history-list-item"]}>
      <View className={`${style["flex-row"]} ${style["flex-spaced"]}`}>
        <View className={style["flex-row"]}>
          <View>电子发票</View>
          <View className={style["invoice-time"]}>{invoiceTime}</View>
        </View>
        <View
          className={`${style["clickable-link"]}`}
          onClick={() => {
            navigateTo(`pages/user-invoice-detail/index?id=${invoiceId}`);
          }}
        >
          <View className={`${styledAsLink ? style.link : style["grey-text"]}`}>
            {statusText}
          </View>
        </View>
      </View>
      <View
        className={`${style["name"]} ${style["grey-text"]} ${style["serif"]}`}
      >
        {title}
      </View>
      <View className={style["flex-row"]}>
        <View className={style["grey-text"]}>合计</View>
        <View className={`${style["price"]} ${style["serif"]}`}>
          ￥ {parseFloat(price).toFixed(2)}
        </View>
      </View>
    </View>
  );
};

export default function UserInvoiceCenter() {
  const { dispatchAuthAction } = useAuth();
  const [invoiceHistory, setInvoiceHistory] = useState<InvoiceHistoryShape>([]);

  useDidShow(async () => {
    setInvoiceHistory(await getInvoiceHistory({authDispatch: dispatchAuthAction}));
  });

  return (
    <Layout>
      <UserSubPageBase title="发票中心" scrollable>
        <View
          className={style["top-row"]}
          onClick={() => navigateTo("pages/user-invoice-select/index")}
        >
          <View className={style["row-text"]}>发票服务</View>
          <View className={style.link}>开发票</View>
        </View>

        <AbstractAccordion
          title={"开票历史"}
          bottomBorderColor={colors.colorGrey}
          notoSans
          // TEMP
          defaultOpen
        >
          {invoiceHistory.map((invoiceData) => {
            return (
              <InvoiceHistoryCard
                key={invoiceData.invoiceId}
                invoiceTime={invoiceData.invoiceTime}
                title={invoiceData.name}
                price={invoiceData.invoicePrice}
                invoiceId={invoiceData.invoiceId}
                status={invoiceData.status}
              />
            );
          })}
        </AbstractAccordion>
      </UserSubPageBase>
    </Layout>
  );
}
